<template>
  <div>
    <div class="lunbo">
      <img src="../../assets/images/us1.jpg" alt="" />
    </div>
    <div class="bj">
      <xtltie :xtitle="xtitle"></xtltie>
      <div class="content-list">
        <ul>
          <li v-for="(item, index) in goodsList" :key="index">
            <div class="c-l-left">
              <img :src="item.image" alt="" />
            </div>
            <div class="c-l-right">
              <h3>{{ item.name }}</h3>
              <div>
                <span>规格：</span>
                <span v-if="item.productSkuList.length > 0"
                  >{{ item.productSkuList[0].productPropertyList[0].name
                  }}{{
                    item.productSkuList[0].productPropertyList[0]
                      .productPropertyValue.value
                  }}</span
                >
                <span v-else>无</span>
              </div>
              <p>
                <span>特点：</span>
                <span v-html="item.pcDesc"></span>
              </p>
              <button>立即购买</button>
            </div>
          </li>
        </ul>
        <div class="page">
          <el-pagination
            :small="small"
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="Current"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            :layout="layout"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 底部导航 -->
      <bottom-nav></bottom-nav>
    </div>
  </div>
</template>

<script>
import { getGoodsAll } from "../../api/goods";
//导入标题组件
import Xtltie from "../../components/Xtltie.vue";
import bottomNav from "../../components/bottomNav.vue";
export default {
  name: "Product",
  //注册组件
  components: { Xtltie, bottomNav },
  data() {
    return {
      xtitle: {
        name: "产品展示",
        // nameEnglish: "Product display",
      },
      goodsList: [], //商品列表
      Current: 1, //当前页
      total: 0, //总条数
      layout: "total,sizes, prev, pager, next, jumper",
      small: false,
      pageSize: 10,
    };
  },
  mounted() {
    const viewPortWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
    if (viewPortWidth < 750) {
      this.small = true;
      this.layout = "prev, pager, next";
    }
  },
  created() {
    this.goodsAll({ currentPage: this.Current, pageSize: this.pageSize });
  },
  methods: {
    //获取所有产品
    goodsAll(query) {
      getGoodsAll(query).then((res) => {
        console.log(res.data.data);
        this.goodsList = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    //分页器回调
    handleCurrentChange(val) {
      this.Current = val;
      this.goodsAll({
        currentPage: val,
        pageSize: this.pageSize,
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.goodsAll({
        currentPage: 1,
        pageSize: this.pageSize,
      });
    },
  },
};
</script>


<style lang="less" scoped>
::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: rgb(181, 0, 3);
    color: #fff;
  }
  .el-pagination.is-background .el-pager li.active {
    color: #fff;
    cursor: default;
  }
  .el-pagination.is-background .el-pager li:hover {
    color: rgb(181, 0, 3);
  }
  .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: rgb(181, 0, 3);
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    background-color: rgb(181, 0, 3);
    color: #fff;
  }
  .el-select-dropdown__item.selected {
    color: rgb(181, 0, 3) !important;
  }
  .el-select .el-input.is-focus .el-input__inner {
    border-color: rgb(181, 0, 3) !important;
  }
  .el-pagination .el-select .el-input .el-input__inner:hover {
    border-color: rgb(181, 0, 3) !important;
  }
  .el-input.is-active .el-input__inner,
  .el-input__inner:focus {
    border-color: rgb(181, 0, 3) !important;
  }
}
@media screen and (min-width: 1029px) {
  .lunbo {
    position: relative;
    margin-bottom: 80px;
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 8%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;

    .content-list {
      ul {
        width: 80%;
        margin: auto;
        padding-top: 40px;
        li {
          padding: 35px;
          margin-bottom: 25px;
          display: flex;
          border: 1px solid #f1f1f1;
          .c-l-left {
            width: 30%;
            margin: auto;
            img {
              width: 100%;
            }
          }
          .c-l-right {
            width: 66%;
            margin-left: 30px;
            text-align: left;
            line-height: 50px;
            h3 {
              font-size: 34px;
              font-weight: bold;
              color: #b50003;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            div {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 24px;
              span:nth-child(1) {
                font-weight: 600;
              }
            }
            p {
              /* 1.溢出隐藏 */
              overflow: hidden;
              /* 2.用省略号来代替超出文本 */
              text-overflow: ellipsis;
              /* 3.设置盒子属性为-webkit-box  必须的 */
              display: -webkit-box;
              /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
              -webkit-line-clamp: 3;
              /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
              word-break: break-all;
              /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
              -webkit-box-orient: vertical;
              font-size: 24px;
              color: #444444;
              span:nth-child(1) {
                font-weight: 600;
              }
            }
            button {
              margin-top: 10px;
              width: 120px;
              height: 40px;
              color: #ffffff;
              background-color: #ca0000;
            }
          }
        }
      }
      .page {
        margin-bottom: 30px;
      }
    }
  }
}
@media only screen and (min-width: 750px) and (max-width: 1028px) {
  .lunbo {
    position: relative;
    margin-bottom: 80px;
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 14%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;

    .content-list {
      ul {
        width: 80%;
        margin: auto;
        padding-top: 40px;
        li {
          padding: 35px;
          margin-bottom: 25px;
          border: 1px solid #f1f1f1;
          .c-l-left {
            width: 30%;
            margin: auto;
            img {
              width: 100%;
            }
          }
          .c-l-right {
            width: 100%;
            text-align: center;
            line-height: 40px;
            h3 {
              font-size: 24px;
              font-weight: bold;
              color: #b50003;
            }
            div {
              font-size: 18px;
              span:nth-child(1) {
                font-weight: 600;
              }
            }
            p {
              /* 1.溢出隐藏 */
              overflow: hidden;
              /* 2.用省略号来代替超出文本 */
              text-overflow: ellipsis;
              /* 3.设置盒子属性为-webkit-box  必须的 */
              display: -webkit-box;
              /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
              -webkit-line-clamp: 3;
              /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
              word-break: break-all;
              /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
              -webkit-box-orient: vertical;
              font-size: 18px;
              color: #444444;
              span :nth-child(1) {
                font-weight: 600;
              }
            }
            button {
              font-size: 16px;
              margin-top: 10px;
              width: 20%;
              height: 40px;
              color: #ffffff;
              background-color: #ca0000;
            }
          }
        }
      }
      .page {
        margin-bottom: 30px;
      }
    }
  }
}
@media screen and (max-width: 749px) {
  .lunbo {
    position: relative;
    margin-bottom: 10px;
    img {
      width: 100%;
    }
  }
  .bj {
    width: 100%;
    // height: 1590px;
    height: auto;
    padding-bottom: 16%;
    position: relative;
    background: url("../../assets/images/bbjj_02.jpg") center no-repeat;
    background-size: 100% 100%;

    .content-list {
      ul {
        width: 98%;
        margin: auto;
        padding-top: 20px;
        li {
          display: flex;
          // padding: 35px;
          margin-bottom: 25px;
          border: 1px solid #f1f1f1;
          .c-l-left {
            width: 40%;
            // margin: auto;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
          .c-l-right {
            width: 100%;
            margin-left: 10px;
            text-align: left;
            // line-height: 40px;
            h3 {
              font-size: 14px;
              font-weight: bold;
              color: #b50003;
            }
            div {
              font-size: 14px;
              span:nth-child(1) {
                font-weight: 600;
              }
            }
            p {
              /* 1.溢出隐藏 */
              overflow: hidden;
              /* 2.用省略号来代替超出文本 */
              text-overflow: ellipsis;
              /* 3.设置盒子属性为-webkit-box  必须的 */
              display: -webkit-box;
              /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
              -webkit-line-clamp: 2;
              /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
              word-break: break-all;
              /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
              -webkit-box-orient: vertical;
              font-size: 14px;
              color: #444444;
              span :nth-child(1) {
                font-weight: 600;
              }
            }
            button {
              font-size: 12px;
              // margin-top: 10px;
              width: 25%;
              height: 20px;
              float: right;
              color: #ffffff;
              background-color: #ca0000;
            }
          }
        }
      }
      .page {
        margin-bottom: 30px;
      }
    }
  }
}
</style>